<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table,td {
            border: 1px solid #000;padding: 20px;
        }
    </style>
</head>
<body>

</body>

<script>
    var data = [
        { name: 'jim1', age: 19, gender: 'male' },
        { name: 'jim2', age: 18, gender: 'female' },
        { name: 'jim3', age: 20, gender: 'female' },
        { name: 'jim4', age: 21, gender: 'male' },
        { name: 'jim5', age: 19, gender: 'female' },
        { name: 'jim6', age: 18, gender: 'male' }
    ];
    // 1, 创建 table 标签 和 tbody 标签
    // 2, 遍历数组, 生成 tr 标签
    // 3, 在遍历的内部, 再次遍历数据, 生成 td 标签

    function isArrayLike( array ) {
        var length = array && array.length;
        return typeof length === 'number' && length >= 0;
    }
    function each( array,callback ){
        var i,k ;
        if ( isArrayLike( array ) ) {
            for ( i = 0 ; i < array.length ; i++ ) {
                if ( callback.call( array[i] , i , array[i] ) === false ) return false;
            }
        }else {
            for ( k in array ) {
                if ( callback.call( array[k] , k , array[k] ) === false ) return false;
            }
        }
        return array;
    }


    /* 创建元素封装 */
    function cTag( tagElement ) {
        return document.createElement( tagElement );
    }
    var table = cTag('table');
    var tbody = cTag('tbody');
    each(data,function( i,v ){
        var tr = cTag('tr');
        each(v,function(key,value){
            var td = cTag('td');
            var text = document.createTextNode(value+'');
            td.appendChild(text);
            tr.appendChild(td);
        });
        tbody.appendChild(tr);
    });
    table.appendChild(tbody);
    table.style.width = '80%';
    table.style.backgroundColor = 'pink';
    document.getElementsByTagName('body')[0].appendChild(table);

</script>
</html>